<template>
  <div class="m-menu">
    <dl class="nav" @mouseleave="menuLeave">
      <dt>全部分类</dt>
      <dd v-for="(item, index) in menuList" :key="index" @mouseenter="menuEnter(item)">
        <i :class="item.type"></i>
        {{ item.name }}
        <span class="arrow"></span>
      </dd>

      <!-- <dd>
        <i class="takeout"></i>
        外卖
        <span class="arrow"></span>
      </dd>

      <dd>
        <i class="food"></i>
        美食
        <span class="arrow"></span>
      </dd>

      <dd>
        <i class="hotel"></i>
        酒店
        <span class="arrow"></span>
      </dd>

      <dd>
        <i class="homestay"></i>
        榛果名宿
        <span class="arrow"></span>
      </dd> -->
    </dl>
    <div v-if="curDetail" class="detail" @mouseenter="detailEnter" @mouseleave="detaiLeave">
      <template v-for="(item, index) in curDetail.items">
        <h4 :key="index">{{ item.title }}</h4>
        <span v-for="(v, i) in item.items" :key="v + '_' + i">{{ v }}</span>
        <!-- <span>甜点饮品</span>
        <span>火锅自助餐</span>
        <span>小吃快餐</span>
        <span>日韩料理</span>
        <span>西餐</span> -->
      </template>
    </div>
  </div>
</template>

<script>
import api from '@/api/index.js'

export default {
  name: 'MMenu',
  data () {
    return {
      curDetail: null,
      menuList: []
      /**
       * menuList: [
        {
          title: '美食',
          icon: 'food',
          children: [{
            title: '美食',
            children: ['代金券', '甜点饮品', '火锅自助', '小吃快餐', '日韩料理', '西餐', '烧烤烤肉']
          }]
        }, {
          title: '外卖',
          icon: 'takeout',
          children: [{
            title: '外卖',
            children: ['美团外卖']
          }]
        }, {
          title: '酒店',
          icon: 'hotel',
          children: [{
            title: '酒店',
            children: ['经济型', '舒适/三星', '高档/四星', '豪华/五星']
          }]
        }, {
          title: '民宿',
          icon: 'takeout',
          children: [{
            title: '民宿',
            children: ['美团外卖']
          }]
        }, {
          title: '猫科电影',
          icon: 'takeout',
          children: [{
            title: '猫科电影',
            children: ['美团外卖']
          }]
        }, {
          title: '机票 / 火车票',
          icon: 'takeout',
          children: [{
            title: '猫科电影',
            children: ['美团外卖']
          }]
        }, {
          title: '休闲娱乐 / KTV',
          icon: 'takeout',
          children: [{
            title: '猫科电影',
            children: ['美团外卖']
          }]
        }, {
          title: '生活服务',
          icon: 'takeout',
          children: [{
            title: '生活服务',
            children: ['美团外卖']
          }]
        }, {
          title: '丽人 / 美发 / 医学美容',
          icon: 'takeout',
          children: [{
            title: '猫科电影',
            children: ['美团外卖']
          }]
        }, {
          title: '结婚 / 婚纱摄影 / 婚宴',
          icon: 'takeout',
          children: [{
            title: '猫科电影',
            children: ['美团外卖']
          }]
        }, {
          title: '亲子 / 儿童乐园 / 幼教',
          icon: 'takeout',
          children: [{
            title: '猫科电影',
            children: ['美团外卖']
          }]
        }, {
          title: '运动健身 / 健身中心',
          icon: 'takeout',
          children: [{
            title: '猫科电影',
            children: ['美团外卖']
          }]
        }, {
          title: '家装 / 建材 / 家居',
          icon: 'takeout',
          children: [{
            title: '猫科电影',
            children: ['美团外卖']
          }]
        }, {
          title: '学习培训 / 音乐培训',
          icon: 'takeout',
          children: [{
            title: '猫科电影',
            children: ['美团外卖']
          }]
        }, {
          title: '医疗健康 / 宠物 / 爱车',
          icon: 'takeout',
          children: [{
            title: '猫科电影',
            children: ['美团外卖']
          }]
        }, {
          title: '酒吧 / 密室逃脱',
          icon: 'takeout',
          children: [{
            title: '玩乐',
            children: ['美团外卖']
          }]
        }
      ]
       */
    }
  },
  created () {
    api.getMenuList().then(res => {
      console.log(res)
      this.menuList = res.data.data
    })
  },
  methods: {
    menuEnter (item) {
      this.curDetail = item
    },
    menuLeave () {
      const self = this
      this.timer = setTimeout(() => {
        self.curDetail = null
      }, 500)
    },
    detailEnter () {
      clearTimeout(this.timer)
    },
    detaiLeave () {
      this.curDetail = null
    }
  }
}
</script>

<style>
</style>
